<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Provide/Inject</title>
    </head>
    <body>

        <h3>Provide/Inject</h3>

        <div id="root"></div>

        <script src="../scripts/vue@3.2.31.js"></script>

        <script>

            const Counter = {
                inject: [ 'message' , 'names'],
                template: `<div>
                             <p>{{ message }}</p>
                             <button>{{ count }}</button>
                             <p>
                                 <span v-for="name in names">{{ name }}</span>
                             </p>
                           </div>`,
                data(){
                    return { count: 1 }
                }
            }

            const Container = {
                components: {
                    'counter': Counter
                },
                inject: [ 'message' , 'names'],
                template: `<div>
                                <counter></counter>
                                <hr>
                                {{ message }}
                                <hr>
                                {{ names.join(',') }}
                           </div>` 
            }

            Vue.createApp({
                components: {
                    'container': Container
                },
                template: `<container></container>`,
                provide: {
                    message: 'hello',
                    names: [ '孙悟空' , '猪悟能' , '沙悟净' ]
                }
            }).mount('#root');
        </script>
        
    </body>
</html>